
<template>
	<view class="userCustom ss-flex justify-between align-center">
		<view class="box ss-flex-col justify-center align-center " @click="jump(data?.left?.url)">
			<image style="width:90rpx;height:90rpx" :src="sheep.$url.cdn(data?.left?.src)"></image>
			<view>
				<view class="title font-2">{{data?.left?.title}}</view>
			</view>
		</view>
		<view class="center  ss-flex-col justify-center align-center "  @click="jump(data?.center?.url)">
			<view class="hjBox" style="width:104rpx;height:88rpx">
				<image class="hj" style="width:220rpx;height:220rpx" :src="sheep.$url.cdn(data?.center?.src ||'/static/icon/hj.gif')"></image>
			</view>
			<view>
				<view class="title font-2">{{data?.center?.title}}</view>
			</view>
		</view>
		<!-- /pages/user/commission/center /pages/device/info-->
		<view class="box ss-flex-col justify-center align-center " @click="jump(data?.right?.url)">
			<image style="width:90rpx;height:90rpx" :src="sheep.$url.cdn(data?.right?.src)"></image>
			<view>
				<view class="title font-2">{{data?.right?.title}}</view>
			</view>
		</view>
		
		
	</view>
</template>

<script setup>
	
	import {
		computed,
		reactive,
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	
	import sheep from '@/sheep';
	const props = defineProps({
	  data: {
	    type: Object,
	    default: () => ({}),
	  },
	  styles: {
	    type: Object,
	    default: () => ({}),
	  },
	});
	const code = ref(-1);
	onMounted(()=>{
	})
	const jump = (url) => {
		
		sheep.$router.go(url);
	}
	
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}
	.userCustom{
		background: #FFFFFF;
	}
	.center{
		  background-image: url('https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/icon/yuanbg.gif'); /* 设置背景图片 */
		  background-size: 100rpx 100rpx; /* 指定背景图尺寸 */
		  background-position: 44% 26rpx; /* 指定背景图位置 */
		  background-repeat: no-repeat; /* 防止背景图重复 */
		  .hjBox{
			  position: relative;
			  .hj{
				  position: absolute;
				  left: 50%;
				  top: 50%;
				  transform: translate(-45%,-55%);
			  }
		  }
	}
	.box,
	.center{
		// width: 348rpx;
		flex:1;
		height: 200rpx;
		border-radius: 8rpx;
		padding:0rpx;
		
		image {
			width: 110rpx;
			height: 110rpx;
		}
		.title {
			margin-top: 10rpx;
			font-family: 思源黑体;
			font-weight: 700;
			color: #333D51;
		}
		
		.info {
			font-family: 思源黑体;
			font-weight: 500;
			color: #B7B7B7;
		}
	}
</style>